<template>
  <div class="film-item" @click="handleClick">
    <div class="film-item__left">
      <img class="film-poster" :src="poster" />
    </div>
    <div class="film-item__middle">
      <div class="film-name">{{ name }}</div>
    </div>
    <div class="film-item__right"></div>
  </div>
</template>

<script>
export default {
  props: {
    filmId: Number,
    name: String,
    poster: String
  },

  inheritAttrs: false,

  methods: {
    handleClick() {
      this.$router.push({
        name: 'film',
        params: {
          filmId: this.filmId
        }
      })
    }
  }
}
</script>

<style scoped>
.film-item {
  display: flex;
  padding: 15px 15px 15px 15px;
  height: 94px;
  position: relative;
}

.film-item__left {
  width: 66px;
  height: 94px;
  background-color: red;
}

.film-item__right {
  width: 50px;
  background-color: #ccc;
}

.film-item__middle {
  padding: 0 20px;
  flex: 1;
  background-color: pink;
}

.film-name {
  font-size: 26px;
  line-height: 36px;
}

.film-poster {
  display: block;
  width: 100%;
}
</style>
